<html>
	<head>
		<title>控制div属性</title>
		<meta charset='Utf-8'>
		<style>
			#div1 {
				width:300px;
				height:150px;
				border:2px solid #FF9900;
				background-color: #fff;
				position: absolute;
				top:100px;
				left:200px;

			}
			h2 {
				text-align: right;
				margin: 0;
				padding: 0;
				height:28px;
				border-bottom: 1px solid #FF9900;
				background-color: #FFCC00;
			}

			span {
				outline: 1px solid #FF9900;
				text-align: right;
				line-height: 28px;
				outline: 1px solid #FF9900;
				text-align: right;
				margin-right: 20px;
				padding: 0px 6px;
				background-color: #Fff;
				cursor: pointer;
			}

			#overlay {
				display: none;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.3);
				position: absolute;
				top: 0;
				left: 0;
			}

		</style>
		<script>
		window.onload=function() {
			var overlay = document.getElementById('overlay');
			var div =  document.getElementById('div1');
			var popup = document.getElementsByTagName('input')[0];
			var close = document.getElementsByTagName('span')[0];
			var changeColor = document.getElementsByTagName('span')[1];
			var changeCss = document.getElementById('changeCss');
			var resetCss = document.getElementById('resetCss');
			// 弹出
			popup.onclick=function() {
				changeStyle(overlay,'display','block');
				changeStyle(div,'display','block');

			}
			// 关闭
			close.onclick=function() {
				changeStyle(overlay,'display','none');
				changeStyle(div,'display','none');
			}
			// 换色
			changeColor.onclick=function() {
				changeStyle(div,'background-color','#456');
				//跟css名称写法一样诶……
			}

			// 变css
			changeCss.onclick=function() {
				var attr = document.getElementById('css-name').value;
				var value = document.getElementById('css-value').value;
				console.log(value);
				changeStyle(div,attr,value);
			}
			// 重置css
			resetCss.onclick = function () {
				div.removeAttribute('style');
			}

		}

			// 更换样式方法
			function changeStyle(elem,attr,value) {
				elem.style[attr] = value;
			}


		</script>
	</head>
	<body>
		<div id="overlay"></div>
		<input type="button" value='弹出层'>
	
		<div id="div1">
			<h2><span id='close'>X</span><span>更换颜色</span></h2>
			属性名：<input type="text" id='css-name'> <br>
			属性值：<input type="text" id='css-value'> <br>
			<input type="button" value='变' id='changeCss'>
			<input type="button" value='重置' id='resetCss'>
		</div>
		

	</body>

	<script>

	</script>
</html>